<template>
	<view class="nc-footprint-content">
		<view class="scroll-wrap">
			<scroll-view scroll-x="true" class="footprint-head">
				<text class="footprint-item" :class="headIndex == -1 ? 'select-color' : ''" @click="initFootPrint('', -1)">全部宝贝</text>
				<text
					class="footprint-item"
					:class="headIndex == index ? 'select-color' : ''"
					@click="initFootPrint(item.category_id, index)"
					v-for="(item, index) in categoryList"
					:key="index"
				>
					{{ item.category_name }}
				</text>
			</scroll-view>
		</view>

		<view class="footprint-body" v-if="categoryDate.length > 0">
			<view v-for="(item, index) in categoryDate" :key="index" v-if="item.goods_info && item.goods_info.goods_name">
				<text v-if="item.isShow" class="body-time">{{ item.month }}月{{ item.day }}日</text>
				<view class="body-item">
					<navigator class="body-item-pic" :url="'/pages/goods/detail/detail?goods_id=' + item.goods_id">
						<image
							v-if="item.goods_info && item.goods_info.picture_info && item.goods_info.picture_info.pic_cover"
							:src="$util.img(item.goods_info.picture_info.pic_cover)"
							mode="aspectFit"
						></image>
						<image v-else :src="$util.img('upload/uniapp/default_goods.png')" mode="aspectFit"></image>
					</navigator>
					<view class="body-item-content">
						<navigator class="body-item-desc" :url="'/pages/goods/detail/detail?goods_id=' + item.goods_id">{{ item.goods_info.goods_name }}</navigator>s
						<view>
							<text v-if="item.goods_info.point_exchange_type == 0 || item.goods_info.point_exchange_type == 2" class="price">
								￥{{ item.goods_info.promotion_price }}
							</text>
							<template v-else>
								<text v-if="item.goods_info.point_exchange_type == 1 && item.goods_info.promotion_price > 0" class="price">
									￥{{ item.goods_info.promotion_price }}+{{ item.goods_info.point_exchange }}积分
								</text>
								<text v-else class="price">{{ item.goods_info.point_exchange }}积分</text>
							</template>
							<text class="delete" @click="deleteMyPath(item.browse_id)">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="no-more">
			<view class="no-icon-view">
				<text class="iconfont iconzuji"></text>
				<view class="no-title">您还没有足迹</view>
			</view>
			<ns-goods-recommend ref="goodsRecommend"></ns-goods-recommend>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
import loadingCover from '@/components/loading/loading.vue';
export default {
	components: {
		nsGoodsRecommend,
		loadingCover
	},
	data() {
		return {
			headIndex: -1,
			category_id: '',
			categoryList: [], //分类
			categoryDate: [], //内容
			identifying: true, //标识
			recommend: {
				page_index: 1,
				page_size: 6
			},
			day: '',
			isLoad: false
		};
	},
	onLoad() {
		this.initFootPrint('', -1);
	},
	mixins: [http],
	onReachBottom() {
		if(this.categoryDate.length > 0) return;
		this.$refs.goodsRecommend.getGoodsList();
	},
	methods: {
		/* 初始化数据 */
		initFootPrint(item, index) {
			if (this.isLoad) {
				return;
			}
			this.isLoad = true;
			this.category_id = item;
			this.headIndex = index;
			this.day = '';
			this.sendRequest({
				url: 'System.Member.footprint',
				data: {
					page_index: 1,
					page_size: 0,
					category_id: this.category_id
				},
				success: res => {
					if (res.code == 0) {
						if (this.identifying) {
							this.categoryList = res.data.category_list;
							this.identifying = false;
						}
						this.categoryDate = res.data.data;
						for (let i = 0; i < this.categoryDate.length; i++) {
							// console.log('categoryDate',categoryDate[i]);
							
							// item.goods_info.picture_info.pic_cover
							console.log('11111111',this.categoryDate)
							console.log('202',this.categoryDate[0].goods_info.picture_info.pic_cover)
							if (this.categoryDate[i].goods_info.picture_info == null) {
								this.categoryDate[i].goods_info.picture_info = {};
							}
							let day = this.categoryDate[i].day;
							if (day != this.day) {
								this.day = day;
								this.categoryDate[i].isShow = true;
							} else {
								this.categoryDate[i].isShow = false;
							}
						}
						this.isLoad = false;
						if (this.$refs.loadingCover == undefined) return;
						this.$refs.loadingCover.hide();
					}
				}
			});
		},
		/* 删除足迹 */
		deleteMyPath(id) {
			this.sendRequest({
				url: 'System.Member.deleteFootprint',
				data: {
					type: 'browse_id',
					value: id
				},
				success: res => {
					if (res.data > 0) {
						this.$util.showToast({
							title: '删除成功'
						});
						this.initFootPrint(this.category_id, this.headIndex);
					} else {
						this.$util.showToast({
							title: '删除失败'
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.scroll-wrap {
	width: 100%;
	height: 84rpx;
	overflow: hidden;
	position: fixed;
	z-index: 999;
	height: 84rpx;
	line-height: 84rpx;
	border-top: 2rpx solid $ns-bg-color-gray;
	border-bottom: 2rpx solid $ns-bg-color-gray;
	background-color: #fff;
	.footprint-head {
		overflow-x: auto;
		white-space: nowrap;
		width: 100%;
		.footprint-item {
			padding: 0 20rpx;
			display: inline-block;
		}
	}
}

.footprint-body {
	height: 100vh;
	box-sizing: border-box;
	padding-top: 84rpx;
	.body-time {
		display: block;
		margin-top: 20rpx;
		padding-left: 20rpx;
		height: 80rpx;
		font-size: $ns-font-size-lg;
		font-weight: 600;
		line-height: 80rpx;
		background-color: #fff;
	}
	.body-item {
		padding: 20rpx;
		height: 160rpx;
		border-bottom: 2rpx solid $ns-bg-color-gray;
		display: flex;
		align-items: center;
		background-color: #fff;
		.body-item-pic {
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}
		}
		.body-item-content {
			min-height: 160rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex-grow: 1;
			flex-shrink: 1;
			.body-item-desc {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: $ns-font-size-base;
				line-height: 1.5;
			}
			> view {
				display: flex;
				justify-content: space-between;
				font-size: $ns-font-size-base;
				.price {
					color: $base-color;
				}
				.delete {
					color: $ns-text-color-gray;
				}
			}
		}
	}
}
.no-more {
	overflow: scroll;
	padding: 100rpx 30rpx 30rpx 30rpx;
	.no-icon-view {
		line-height: 1;
		text-align: center;
		margin-top: 40rpx;
		text {
			color: $ns-text-color-gray;
			font-size: 200rpx;
		}
		.no-title {
			color: $ns-text-color-gray;
			text-align: center;
			margin-top: 20rpx;
		}
	}
}

.select-color {
	color: $base-color;
}
</style>
<style scoped>
.footprint-head >>> .uni-scroll-view::-webkit-scrollbar {
	display: none !important;
}
</style>
